<!--  -->
<template>

  <el-menu
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#ffffff"
    :collapse-transition="true"
    :collapse="isCollapse"
    :default-active="defaultIndex"
    :ischeckTabs="ischeckTabs"
    @open="handleOpen"
    @close="handleClose" >
    <div class="mb-2">{{ companyName }}</div>
    <el-menu-item-group>
      <el-menu-item index="1008611" style="width: 100%; text-align: center;" @click="toRoute('panelIndex','大屏','1008611')">
        <span style="width: 100%; text-align: center;" >大屏</span>
      </el-menu-item>
    </el-menu-item-group>
    <el-submenu
      v-for="(item, index) in routerList"
      :key="index"
      :index="item.id+''">
        <template v-slot:title>
          <i :class="item.icon"></i>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item-group
          v-for="(iTs,indexs) in item.children"
          :key="`${index}+${indexs}`"
          :index="iTs.id+''"
        >
          <el-menu-item :index="iTs.id+''" @click="toRoute(iTs.path,iTs.name,iTs.id,iTs)">{{ iTs.name }}</el-menu-item>
        </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      defaultIndex: sessionStorage.getItem('defaultOpenListIndex') === null ? '1008611' : sessionStorage.getItem('defaultOpenListIndex'),
      routerList: JSON.parse(sessionStorage.getItem('routerList')),
      companyName: sessionStorage.getItem('companyName')
    }
  },
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    },
    ischeckTabs: {
      type: String,
      default: '1008611'
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    ischeckTabs (valNew, valOld) {
      this.defaultIndex = valNew
      sessionStorage.setItem('defaultOpenListIndex', this.defaultIndex)
    }
  },
  // 方法集合
  methods: {
    configFun (val) {
      if (val instanceof Array) {
        const myRes = val.findIndex((item) => {
          return this.resultArr === item.children
        })
      }
    },
    toRoute (val, name, id, iTs) {
      if (name === '大屏') {
        this.$emit('toRoute', name, val, id, iTs)
      } else {
        this.$emit('toRoute', name, val, id, iTs)
        const nullArr = []
        if (iTs.children === undefined) {
          console.log('')
        } else {
          for (const item of iTs.children) {
            nullArr.push(item.perms)
          }
          sessionStorage.setItem('permissionsButtonArr', JSON.stringify(nullArr))
        }
      }
      sessionStorage.setItem('defaultOpenListIndex', id)
      this.defaultIndex = sessionStorage.getItem('defaultOpenListIndex')
      if (val !== this.$route.path) {
        this.$router.push({
          path: val
        })
      } else {
        return false
      }
    },
    handleOpen (key, keyPath) {
    },
    handleClose (key, keyPath) {
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
.mb-2 {
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  text-align: center;
  color: #fff;
  font-weight: 700;
}
.iTsSpan {
  cursor:pointer !important;
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  user-select:none;
}
.el-menu--collapse {
  width: 100%;
  text-align: center;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>
